$red: #ec4141;
$blue: #85b9e6;

:root {
  // 动态主题颜色
  // --music-base-color: #ec4141;
  // 浅色背景颜色
  --music-header-color: var(--music-base-color);
  --music-main-color: linear-gradient(25deg, #fff, rgb(235, 231, 228));
  --music-player-color: #fff;
  // 浅色icon颜色
  --music-icon-color: #313131;
  --music-icon-hover-color: #313131;
  // 播放器左侧文本颜色
  --music-text-color: #313131;
  --music-text-color-light: #555555;
  // 侧边栏文本选中颜色
  --music-active-text-color: #313131;
  // 推荐歌单
  --music-recommend-text-color: #333333;
  --music-recommend-text-hover-color: #555555;
  // 最新音乐颜色
  --music-title-color: #313131;
  // 黑转白
  --music-link-color: rgb(127, 127, 127);
  --music-link-hover-color: rgb(69, 69, 69);
  --music-text-link-color: #313131;
  --music-text-link-hover-color: var(--music-color-9);
  // 公共颜色
  --music-color-1: rgba(139, 139, 139, 0.1);
  --music-color-2: rgba(139, 139, 139, 0.2);
  --music-color-3: rgba(139, 139, 139, 0.3);
  --music-color-4: rgba(139, 139, 139, 0.4);
  --music-color-5: rgba(139, 139, 139, 0.5);
  --music-color-6: rgba(139, 139, 139, 0.6);
  --music-color-7: rgba(139, 139, 139, 0.7);
  --music-color-8: rgba(139, 139, 139, 0.8);
  --music-color-9: rgba(139, 139, 139, 0.9);
  //
}

html.dark {
  // 固定黑暗主题颜色
  --music-base-color: #ec4141;
  /* 自定义深色背景颜色 */
  --music-header-color: #202023;
  --music-main-color: #2b2b2b;
  --music-player-color: #202023;
  // 自定义icon图标颜色
  --music-icon-color: #d7d7d8;
  --music-icon-hover-color: rgba(139, 139, 139, 0.9);
  // 播放器左侧文本颜色
  --music-text-color: #6b6b6b;
  --music-text-color-light: #555555;
  // 侧边栏文本选中颜色
  --music-active-text-color: #fefefe;
  // 推荐歌单
  --music-recommend-text-color: #cfd3dc;
  --music-recommend-text-hover-color: #909399;
  // 最新音乐颜色
  --music-title-color: #cfd3dc;
  // 黑转白
  --music-link-color: rgb(139, 139, 139);
  --music-link-hover-color: rgba(199, 199, 199);
  --music-text-link-color: #d3d3d3;
  --music-text-link-hover-color: rgba(139, 139, 139, 0.9);
  .el-button {
    --el-text-color-regular: #fff;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(82, 82, 82, 0.5);
}

// 兼容Firefox、IE
* {
  scrollbar-width: 10px;
  scrollbar-base-color: green;
  scrollbar-track-color: red;
  scrollbar-arrow-color: blue;
}

.el-message {
  top: 100px !important;
}

.recommend_play {
  position: absolute;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #efeded;
  box-shadow: 0 0 10px 7px rgba(208, 208, 208, 0.6) inset;
  cursor: pointer;
  opacity: 0;
  transition: all 0.8s;
  .icon-24gf-play {
    color: #ec4141;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-42%, -50%);
  }
}

.el-pager li:hover {
  color: var(--music-link-hover-color);
}
